<template>
    <div class="member">
      <Table
        border
        :columns="th"
        :data="td"
      >
      </Table>
      <Page
        style="margin-top: 10px;"
        :total="total"
        v-show="total > 0"
        :page-size="page_size"
        @on-change="changePage"
      />
    </div>
</template>

<script>
export default {
  name: 'member',
  data () {
    return {
      th: [
        {
          title: 'UID',
          key: 'uid'
        },
        {
          title: '昵称',
          key: 'nickname'
        },
        {
          title: '头像',
          key: 'avatar',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.avatar
              },
              style: {
                display: 'block',
                width: '40px',
                height: '40px'
              }
            })
          }
        },
        {
          title: '余额',
          key: 'balance',
          render: (h, params) => {
            return h('span', params.row.balance + '元')
          }
        },
        {
          title: '已发红包',
          key: 'red_number'
        },
        {
          title: '注册时间',
          key: 'register_time'
        }
      ],
      // 数据
      td: [],
      // 用户总数
      total: 0,
      // 当前页面
      page: 1,
      // 每页条数
      page_size: 10
    }
  },
  mounted () {
    this.getTotal()
    this.getList()
  },
  methods: {
    /**
     * 获取用户列表
     */
    getList () {
      this.$get('member/getList', {
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.td = data
          } else {
            this.td = []
          }
        })
    },
    /**
     * 获取会员总数
     */
    getTotal () {
      this.$get('member/getTotal')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.total = parseInt(data)
          }
        })
    },
    /**
     * 页面切换
     */
    changePage (page) {
      this.page = page
      this.getList()
    }
  }
}
</script>

<style scoped></style>
